<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link href="/static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/public.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!-- jquery 提示插件css -->
    <link href="/static/plugins/bootstrap-tree/bootstrap-treeview.css" rel="stylesheet">
    <!--bootstrap-tree插件-->
    <link href="/static/plugins/toastr.min.css" rel="stylesheet">
    <style type="text/css">
        /*地图设备弹出框*/
        .dong-box {
            position: absolute;
            top: 18%;
            left: -449px;
            z-index: 100;
            width: 450px;
            background-color: #fff;
            transition: all 0.5s;
        }

        .equipment-box {
            position: relative;
            width: 450px;
            overflow: hidden;
        }

        .equipment-content {
            height: 400px;
            width: 470px;
            overflow: auto;
        }

        .equipment-title {
            color: #333;
            background-color: #f5f5f5;
            height: 50px;
            line-height: 50px;
            text-align: center;
            transition: width 0.5s;
        }

        .equipment-title-img {
            position: absolute;
            width: 35px;
            height: 50px;
            line-height: 59px;
            background-color: #fff;
            right: -34px;
            top: 216px;
            text-align: center;
            cursor: pointer;
        }

        .equipment-table {
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            overflow: hidden;
        }

        .equipment-table-header {
            background-color: #3c8dbc;
            color: #fff;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=1t51luG5BxGrGLW4y9zu3sS6Tz8O3vAG"></script>
    <title>设备管理</title>
</head>
<body style="background-color:#eee">
<div id="app" style="margin-top: 10px">
    <div class="float-clear">
        <div class="float-left contentBox border-all"
             style="width:18%;margin: 0 0.5%;">
            <div class="content-title border-bottom">
                <span>区域选择</span>
            </div>
            <div class="content-center">
                <div id="treeview7" class="test"></div>
            </div>
        </div>
        <div class="float-left contentBox border-all" style="width:80.5%;">
            <!--选项卡切换-->
            <ul id="myTab" class="nav nav-tabs content-title">
                <li style="float:left;padding: 8px 0 0 15px;">
                    <h5>{{treeTitle.name}}</h5>
                </li>
                <li v-for="(tab,index) in menuList" v-bind:class="{active:tab.isActive}">
                    <a data-toggle="tab" @click="tabsSwitch(index)">{{tab.name}}</a>
                </li>
            </ul>
            <div class="content-center">
                <div class="tab-card" v-bind:class="{showCard:menuList[0].isActive}">
                    <button class="btn btn-default my-btn my-search-btn my-btn-search"
                            style="top:39px;left: 179px;">查询
                    </button>
                    <table id="table"
                           data-toggle="table"
                           data-toolbar=".toolbar"
                           data-pagination="true"
                           data-maintain-selected="true"
                           data-search="true"
                           data-show-refresh="true"
                           data-search-align="left"
                           data-toolbar-align="right">
                        <thead>
                        <tr>
                            <th data-field="id"></th>
                            <th data-field="name">设备名称</th>
                            <th data-field="no">编号</th>
                            <th data-field="step">状态</th>
                            <th data-field="long">经度</th>
                            <th data-field="lat">纬度</th>
                            <th data-field="startTime">启动时间</th>
                            <th data-field="day">运行天使</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="tab-card" v-bind:class="{showCard:menuList[1].isActive}">
                    <div id="allmap"></div>
                    <div id="equipmentMap" class="dong-box">
                        <div class="equipment-box border-all">
                            <div class="equipment-title border-bottom">
                                设备信息
                            </div>
                            <!--头部-->
                            <div class="float-clear border-bottom equipment-table-header">
                                <div class="float-left equipment-table border-right" style="width: 100px;">
                                    <span>设备名称</span>
                                </div>
                                <div class="float-left equipment-table border-right" style="width: 50px;">
                                    <span>位置</span>
                                </div>
                                <div class="float-left equipment-table border-right" style="width: 50px;">
                                    <span>状态</span>
                                </div>
                                <div class="float-left equipment-table border-right" style="width: 100px;">
                                    <span>启动时间</span>
                                </div>
                                <div class="float-left equipment-table" style="width: 75px;">
                                    <span>运行天数</span>
                                </div>
                            </div>
                            <!--循环结构-->
                            <div class="equipment-content">
                                <div class="float-clear border-bottom" v-for="(item,index) in personalList"
                                     :class="{ personalActive: item.isActive }">
                                    <div class="float-left equipment-table border-right" style="width: 100px;">
                                        <span>{{item.userName}}</span>
                                    </div>
                                    <div class="float-left equipment-table border-right"
                                         style="width: 50px;cursor: pointer;" @click="jumpUserMarker(item,index)">
                                        <img src="/static/image/location.png" style="width: 20px;">
                                    </div>
                                    <div class="float-left equipment-table border-right" style="width: 50px;">
                                        <span>{{item.step}}</span>
                                    </div>
                                    <div class="float-left equipment-table border-right" style="width: 100px;">
                                        <span>{{item.startTime}}</span>
                                    </div>
                                    <div class="float-left equipment-table" style="width: 75px;">
                                        <span>{{item.day}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="equipment-title-img border-right border-bottom border-top" @click="boxToggle()">
                            <span class="fa fa-angle-right" style="font-size: 30px;"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 主要的脚本 -->
<script src="/static/js/jquery-3.1.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/js/vue.min.js"></script>
<!-- Toastr -->
<script src="/static/plugins/toastr/toastr.min.js"></script>
<!--bootstrap-tree插件-->
<script src="/static/plugins/bootstrap-tree/bootstrap-treeview.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            oldIndex: 1,
            tabIndex: 0,
            menuList: [
                {
                    name: '列表',
                    isActive: false
                },
                {
                    name: '地图',
                    isActive: true
                },
            ],
            treeTitle: {
                id: null,
                name: '请选择'
            },
            personalList: [
                {
                    userName: '古县1号泵组',
                    no: '0001',
                    point: {
                        long: 112.607,   //经度
                        lat: 37.803      //纬度
                    },
                    personalMarker: null,
                    content: "当前任务:设备维修",
                    isActive: false,
                    step: '正常',
                    startTime: '2018-3-15',
                    day: 230
                },
                {
                    userName: '古县2号泵组',
                    no: '0002',
                    point: {
                        long: 112.580,   //经度
                        lat: 37.800      //纬度
                    },
                    personalMarker: null,
                    content: "当前任务:设备维修",
                    isActive: false,
                    step: '正常',
                    startTime: '2018-3-18',
                    day: 120
                },
            ]
        },
        methods: {
            tabsSwitch: function (tabIndex) {
                vm.menuList[vm.oldIndex].isActive = false;
                vm.oldIndex = tabIndex;
                vm.menuList[tabIndex].isActive = true;
                $table.bootstrapTable('load', tableList);
            }
        },
    });
    //boot table
    var $table = $("#table");
    var tableList = [];
    for (var i = 1; i < 20; i++) {
        tableList.push({
            id: i,
            name: '古县' + i + '号泵组',
            no: '0' + i,
            step: '正常',
            startTime: '2018-3-15',
            day: 230,
            long: 112.607,   //经度
            lat: 37.803      //纬度
        });
    }
    ;
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(112.607, 37.803), 15);
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

    //添加每个用户所在点的标注
    function addUserMarker() {
        for (var i = 0; i < vm.personalList.length; i++) {
            var point = new BMap.Point(vm.personalList[i].point.long, vm.personalList[i].point.lat);
            var icon = new BMap.Icon("/static/image/equipment.png", new BMap.Size(30, 30), {anchor: new BMap.Size(7, 10)});
            var mkr = new BMap.Marker(point, {icon: icon});//创建标注
            vm.personalList[i].personalMarker = mkr;
            map.addOverlay(mkr);//将标注添加到地图上
            addClickHandler(vm.personalList[i], mkr); //添加事件监听
        }
    }

    //标注点事件监听
    function addClickHandler(item, marker) {
        marker.addEventListener("click", function (e) {
            openInfo(item, e);//点击打开标注点信息窗口
        });
    }

    //点击打开标注点信息窗口
    function openInfo(item, e) {
        var long;
        var lat;
        var point;
        var sContent =
            "<div class='infoWindow-box'><div class='infoWindow-title'><span>" + item.userName + "</span><a class='float-right infoWindow-a' href='javascript:void(0);' onclick='jumpDetail()'>查看详情 ></a></div><div class='float-clear'><img src="/static/image/pumpImg.jpg" class='float-left infoWindow-img'><div class='float-left'><div class='infoWindow-detail'>运行状态：开</div><div class='infoWindow-detail'>运行时间：" + item.day + "天</div><div class='infoWindow-detail'>设备状态：" + item.step + "</div> <div class='infoWindow-detail'>设备编号：" + item.no + "</div></div></div></div>";
        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
        if (e) {
            long = e.target.getPosition().lng;
            lat = e.target.getPosition().lat
        } else {
            long = item.point.long;
            lat = item.point.lat;
        }
        point = new BMap.Point(long, lat);
        map.openInfoWindow(infoWindow, point); //开启信息窗口
        //图片加载完毕重绘infowindow
        document.getElementsByClassName('infoWindow-img').onload = function () {
            infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
        };
        map.panTo(point);                       //将地图中心移动到当前选择点位
    }

    //点击定位指定到当前用户的标注点 打开信息框
    function jumpUserMarker(item, index) {
        personalActive(index);//选择在线人员列表样式
        map.clearOverlays();  //清除地图覆盖物
        addUserMarker();      //将点位重新标注出来
        openInfo(item, null);//点击打开标注点信息窗口
    }

    //点击改变在线人员列表状态
    function personalActive(index) {
        vm.personalList[vm.oldIndex].isActive = false;
        vm.oldIndex = index;
        vm.personalList[index].isActive = true;
    }

    //点击收回信息盒子
    var equipment = document.getElementById("equipmentMap");
    var isHide = true;

    function boxToggle() {
        equipment.style.left = isHide ? "0" : '-449px';
        isHide = !isHide;
    }

    //添加每个用户所在点的标注
    addUserMarker();
    var defaultData = [
        {
            name: '父节点 1',
            href: '#parent1',
            tags: ['4'],
            children: [
                {
                    name: '子节点 1',
                    href: '#child1',
                    tags: ['2'],
                    children: [
                        {
                            name: '孙子节点 1',
                            href: '#grandchild1',
                            tags: ['0']
                        },
                        {
                            name: '孙子节点 2',
                            href: '#grandchild2',
                            tags: ['0']
                        }
                    ]
                },
                {
                    name: '子节点 2',
                    href: '#child2',
                    tags: ['0']
                }
            ]
        },
        {
            name: '父节点 2',
            href: '#parent2',
            tags: ['0']
        },
        {
            name: '父节点 3',
            href: '#parent3',
            tags: ['0']
        },
        {
            name: '父节点 4',
            href: '#parent4',
            tags: ['0']
        },
        {
            name: '父节点 5',
            href: '#parent5',
            tags: ['0']
        }
    ];

    //点击跳转到指定详情页面
    function jumpDetail() {
        var item = {
            name: '详情页面',
            url: 'secondSupply/qeuipmentDetail.html'
        };
        window.parent.window.ckAddPageTabs(item);
    }

    $(document).ready(function () {
        $(".contentBox").css({"height": $(document.body).height() - 20});
        $(window).resize(function () {//当浏览器大小变化时
            $(".contentBox").css({"height": $(document.body).height() - 20})
        });
        //绘制左侧树
        $('#treeview7').treeview({
            color: "#666",
            showBorder: false,
            data: defaultData,
            onNodeSelected: function (event, data) {
                vm.treeTitle = {
                    id: data.id,
                    name: data.name
                }
                //TODO:通过ID获取设备详细信息  ajax
            }
        });
    })
    //    标题的的切换
</script>
</body>
</html>
